<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
// 引入基本模板
const echarts = require('echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
import resize from './mixins/resize'
import { field } from '@/api/echarts'
import { searchc } from '@/api/curd'
export default {
  name: 'Echarts',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    field: {
      type: String,
      default: '飞书'
    }
  },
  data() {
    // 这里存放数据
    return {
      chart: null,
      datafield: {
        field: '',
        time1: '',
        time2: ''
      },
      college: [],
      num: []
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initecharts()
    this.getdata()
  },
  methods: {
    sendItem(data, time) {
      this.college = []
      this.num = []
      console.log('time: ', time)
      console.log('data: ', data)
      if (time.time1 !== 'NaN-aN-aN aN:aN:aN') {
        this.datafield.time1 = time.time1
        this.datafield.time2 = time.time2
      }
      this.datafield.field = data
      console.log('this.datafield: ', this.datafield)

      this.getdata()
    },
    async getdata() {
      const res = await field(this.datafield)
      console.log('res: ', res)
      const { data } = await searchc()
      console.log('re: ', data)
      if (res.data !== null) {
        data.forEach((ele) => {
          console.log('ele: ', ele)
          res.data.forEach((item) => {
            if (item.college === ele.college && item.college !== '') {
              this.college.push(item.college)
              this.num.push(item.num)
            }
            // if (item.college !== '') {
            //   this.college.push(item.college)
            //   this.num.push(item.num)
            // }
          })
        })

        console.log('this.college: ', this.college)
        console.log('this.num: ', this.num)
        this.setOptions()
      } else {
        this.$notify({
          title: '提示',
          message: '此单位及时间没有人员信息'
        })
      }
    },
    initecharts() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: '各个学院到场人数'
        },
        tooltip: {},
        legend: {
          data: ['人数']
        },
        grid: { // 控制图的大小，调整下面这些值就可以，
          x: 100, // 控制x轴文字与底部的距离
          y2: 200 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
        },
        xAxis: {
          type: 'category',
          data: this.college,
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 45, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontSize: 16,
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: this.num,
          label: {
            show: true,
            position: 'top'
          }
        }]
      })
    }
  }
}
</script>
<style>
</style>
